<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="img/kurento.png" type="image/png" />

<link rel="stylesheet"
	href="webjars/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet"
	href="webjars/ekko-lightbox/dist/ekko-lightbox.min.css">
<link rel="stylesheet" href="webjars/demo-console/index.css">
<link rel="stylesheet" href="css/kurento.css">

<script src="webjars/jquery/dist/jquery.min.js"></script>
<script src="webjars/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="webjars/ekko-lightbox/dist/ekko-lightbox.min.js"></script>
<script src="/webjars/webrtc-adapter/release/adapter.js"></script>
<script src="webjars/demo-console/index.js"></script>

<script src="js/kurento-utils.js"></script>
<script src="js/index.js"></script>

<title>Kurento Tutorial: Hello World with Recording</title>
</head>

<body>
	<header>
		<div class="navbar navbar-inverse navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse"
						data-target=".navbar-collapse"></button>
					<a class="navbar-brand" href="">Kurento Tutorial</a>
				</div>
				<div class="collapse navbar-collapse"
					id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-right">
						<li><a
							href="https://github.com/Kurento/kurento-tutorial-java/tree/master/kurento-hello-world-recording"><span
								class="glyphicon glyphicon-file"></span> Source Code</a></li>
					</ul>
				</div>
			</div>
		</div>
	</header>
	<div class="container">
		<div class="page-header">
			<h1>Tutorial: WebRTC in loopback with recording</h1>
			<p>
				This application shows a <i>WebRtcEndpoint</i> connected to itself
				(loopback) where the media sent to server is recorded and then
				played. Then, the recorded media (stored in the KMS file system) is
				played again. Thus, in the server-side code of this application we
				are using two media pipelines <a href="img/pipelines.png"
					data-toggle="lightbox" data-title="Hello World with Recording"
					data-footer="The first pipeline performs a WebRTC loopback and the media is stored in the KMS file system. The second media pipeline is used to play the recorded media.">media
					pipelines</a> (one for the loopback, and the other one the playback).
				To run this demo follow these steps:
			</p>
			<ol>
				<li>Open this page with a browser compliant with WebRTC anc
					click on <i>Start</i> button.
				<li>Grant the access to the camera and microphone. After the
					SDP negotiation the loopback should start.
				<li>Click on <i>Stop</i> to finish the communication.
				<li>Click on <i>Play</i> to replay the recorded media.
				</li>
			</ol>
		</div>
		<div class="row">
			<div class="col-md-12">
				<input type="radio" name="mode" value="video-and-audio"
					checked="checked"> Video and audio <input type="radio"
					name="mode" value="video-only"> Video only <input
					type="radio" name="mode" value="audio-only"> Audio only
			</div>
		</div>
		<div class="row">
			<div class="col-md-5">
				<h3>Local stream</h3>
				<video id="videoInput" autoplay width="480px" height="360px"
					poster="img/webrtc.png"></video>
			</div>
			<div class="col-md-2">
				<a id="start" href="#" class="btn btn-success"
					onclick="start(); return false;"><span
					class="glyphicon glyphicon-play"></span> Start</a><br> <br> <a
					id="stop" href="#" class="btn btn-danger"
					onclick="stop(); return false;"><span
					class="glyphicon glyphicon-stop"></span> Stop</a><br> <br> <a
					id="play" href="#" class="btn btn-warning"
					onclick="play(); return false;"><span
					class="glyphicon glyphicon-play-circle"></span> Play</a>
			</div>
			<div class="col-md-5">
				<h3>Remote stream</h3>
				<video id="videoOutput" autoplay width="480px" height="360px"
					poster="img/webrtc.png"></video>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<label class="control-label" for="console">Console</label><br>
				<br>
				<div id="console" class="democonsole">
					<ul></ul>
				</div>
			</div>
		</div>
	</div>

	<footer>
		<div class="foot-fixed-bottom">
			<div class="container text-center">
				<hr />
				<div class="row">&copy; 2014-2015 Kurento</div>
				<div class="row">
					<div class="col-md-4">
						<a href="http://www.urjc.es"><img src="img/urjc.gif"
							alt="Universidad Rey Juan Carlos" height="50px" /></a>
					</div>
					<div class="col-md-4">
						<a href="http://www.kurento.org"><img src="img/kurento.png"
							alt="Kurento" height="50px" /></a>
					</div>
					<div class="col-md-4">
						<a href="http://www.naevatec.com"><img src="img/naevatec.png"
							alt="Naevatec" height="50px" /></a>
					</div>
				</div>
			</div>
		</div>
	</footer>

</body>
</html>
